<template>
  <div>
    <div  class="editor" ref="editorRef"></div>
  </div>
</template>

<script setup lang="tsx">
import {ref,reactive,defineEmits, onMounted } from 'vue';
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/

 const state = reactive({
 })
console.log(123)
 defineProps({
  msg:  {
      type: String,
      required: true
    }
})
import { editor as MonacoEditor } from 'monaco-editor';
import './userWorker';
const editorRef:any = ref(null);

onMounted(() => {
    const editor = MonacoEditor.create(editorRef.value, {
    /* 一些配置， 比如说主题，语言类型，等等 */
    theme: 'vs-dark',
    /* 语言 */
    language: 'html',
    /* 是否只读 */
    readOnly: false,
    /* 初始值 */
    value: ``,
    /* 自动布局 */
    automaticLayout: true,
    /* 阻止编辑器滚动到最后一行之外 */
    scrollBeyondLastLine: true,
});
console.log('editor :>> ', editor);
})
</script>

<style  scoped lang="scss" >
.editor{
    height: 500px;
    width: 100%;
}
</style>
